<!DOCTYPE html>
<html>
  <head>
    <title>Buttons & Icons | Flatty - Flat Administration Template</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <meta content='text/html;charset=utf-8' http-equiv='content-type'>
    <meta content='Flat administration template for Twitter Bootstrap. Twitter Bootstrap 3 template with Ruby on Rails support.' name='description'>
    <link href='assets/images/meta_icons/favicon.ico' rel='shortcut icon' type='image/x-icon'>
    <link href='assets/images/meta_icons/apple-touch-icon.png' rel='apple-touch-icon-precomposed'>
    <link href='assets/images/meta_icons/apple-touch-icon-57x57.png' rel='apple-touch-icon-precomposed' sizes='57x57'>
    <link href='assets/images/meta_icons/apple-touch-icon-72x72.png' rel='apple-touch-icon-precomposed' sizes='72x72'>
    <link href='assets/images/meta_icons/apple-touch-icon-114x114.png' rel='apple-touch-icon-precomposed' sizes='114x114'>
    <link href='assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-precomposed' sizes='144x144'>
    <!-- / START - page related stylesheets [optional] -->
    <link href="assets/stylesheets/plugins/flags/flags.css" media="screen" rel="stylesheet" type="text/css" />
    <!-- / END - page related stylesheets [optional] -->
    <!-- / bootstrap [required] -->
    <link href="assets/stylesheets/bootstrap/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
    <!-- / theme file [required] -->
    <link href="assets/stylesheets/light-theme.css" media="all" id="color-settings-body-color" rel="stylesheet" type="text/css" />
    <!-- / coloring file [optional] (if you are going to use custom contrast color) -->
    <link href="assets/stylesheets/theme-colors.css" media="all" rel="stylesheet" type="text/css" />
    <!-- / demo file [not required!] -->
    <link href="assets/stylesheets/demo.css" media="all" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
      <script src="assets/javascripts/ie/html5shiv.js" type="text/javascript"></script>
      <script src="assets/javascripts/ie/respond.min.js" type="text/javascript"></script>
    <![endif]-->
  </head>
  <body class='contrast-red '>
    <header>
      <nav class='navbar navbar-default'>
        <a class='navbar-brand' href='index.html'>
          <img width="81" height="21" class="logo" alt="Flatty" src="assets/images/logo.svg" />
          <img width="21" height="21" class="logo-xs" alt="Flatty" src="assets/images/logo_xs.svg" />
        </a>
        <a class='toggle-nav btn pull-left' href='#'>
          <i class='icon-reorder'></i>
        </a>
        <ul class='nav'>
          <li class='dropdown light only-icon'>
            <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
              <i class='icon-cog'></i>
            </a>
            <ul class='dropdown-menu color-settings'>
              <li class='color-settings-body-color'>
                <div class='color-title'>Body color</div>
                <a data-change-to='assets/stylesheets/light-theme.css' href='#'>
                  Light
                  <small>(default)</small>
                </a>
                <a data-change-to='assets/stylesheets/dark-theme.css' href='#'>
                  Dark
                </a>
                <a data-change-to='assets/stylesheets/dark-blue-theme.css' href='#'>
                  Dark blue
                </a>
              </li>
              <li class='divider'></li>
              <li class='color-settings-contrast-color'>
                <div class='color-title'>Contrast color</div>
                            <a data-change-to="contrast-red" href="#"><i class='icon-cog text-red'></i>
                Red
                <small>(default)</small>
                </a>
    
                            <a data-change-to="contrast-blue" href="#"><i class='icon-cog text-blue'></i>
                Blue
                </a>
    
                            <a data-change-to="contrast-orange" href="#"><i class='icon-cog text-orange'></i>
                Orange
                </a>
    
                            <a data-change-to="contrast-purple" href="#"><i class='icon-cog text-purple'></i>
                Purple
                </a>
    
                            <a data-change-to="contrast-green" href="#"><i class='icon-cog text-green'></i>
                Green
                </a>
    
                            <a data-change-to="contrast-muted" href="#"><i class='icon-cog text-muted'></i>
                Muted
                </a>
    
                            <a data-change-to="contrast-fb" href="#"><i class='icon-cog text-fb'></i>
                Facebook
                </a>
    
                            <a data-change-to="contrast-dark" href="#"><i class='icon-cog text-dark'></i>
                Dark
                </a>
    
                            <a data-change-to="contrast-pink" href="#"><i class='icon-cog text-pink'></i>
                Pink
                </a>
    
                            <a data-change-to="contrast-grass-green" href="#"><i class='icon-cog text-grass-green'></i>
                Grass green
                </a>
    
                            <a data-change-to="contrast-sea-blue" href="#"><i class='icon-cog text-sea-blue'></i>
                Sea blue
                </a>
    
                            <a data-change-to="contrast-banana" href="#"><i class='icon-cog text-banana'></i>
                Banana
                </a>
    
                            <a data-change-to="contrast-dark-orange" href="#"><i class='icon-cog text-dark-orange'></i>
                Dark orange
                </a>
    
                            <a data-change-to="contrast-brown" href="#"><i class='icon-cog text-brown'></i>
                Brown
                </a>
    
              </li>
            </ul>
          </li>
          <li class='dropdown medium only-icon widget'>
            <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
              <i class='icon-rss'></i>
              <div class='label'>5</div>
            </a>
            <ul class='dropdown-menu'>
              <li>
                <a href='#'>
                  <div class='widget-body'>
                    <div class='pull-left icon'>
                      <i class='icon-user text-success'></i>
                    </div>
                    <div class='pull-left text'>
                      John Doe signed up
                      <small class='text-muted'>just now</small>
                    </div>
                  </div>
                </a>
              </li>
              <li class='divider'></li>
              <li>
                <a href='#'>
                  <div class='widget-body'>
                    <div class='pull-left icon'>
                      <i class='icon-inbox text-error'></i>
                    </div>
                    <div class='pull-left text'>
                      New Order #002
                      <small class='text-muted'>3 minutes ago</small>
                    </div>
                  </div>
                </a>
              </li>
              <li class='divider'></li>
              <li>
                <a href='#'>
                  <div class='widget-body'>
                    <div class='pull-left icon'>
                      <i class='icon-comment text-warning'></i>
                    </div>
                    <div class='pull-left text'>
                      America Leannon commented Flatty with veeery long text.
                      <small class='text-muted'>1 hour ago</small>
                    </div>
                  </div>
                </a>
              </li>
              <li class='divider'></li>
              <li>
                <a href='#'>
                  <div class='widget-body'>
                    <div class='pull-left icon'>
                      <i class='icon-user text-success'></i>
                    </div>
                    <div class='pull-left text'>
                      Jane Doe signed up
                      <small class='text-muted'>last week</small>
                    </div>
                  </div>
                </a>
              </li>
              <li class='divider'></li>
              <li>
                <a href='#'>
                  <div class='widget-body'>
                    <div class='pull-left icon'>
                      <i class='icon-inbox text-error'></i>
                    </div>
                    <div class='pull-left text'>
                      New Order #001
                      <small class='text-muted'>1 year ago</small>
                    </div>
                  </div>
                </a>
              </li>
              <li class='widget-footer'>
                <a href='#'>All notifications</a>
              </li>
            </ul>
          </li>
          <li class='dropdown dark user-menu'>
            <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
              <img width="23" height="23" alt="Mila Kunis" src="assets/images/avatar.jpg" />
              <span class='user-name'>Mila Kunis</span>
              <b class='caret'></b>
            </a>
            <ul class='dropdown-menu'>
              <li>
                <a href='user_profile.html'>
                  <i class='icon-user'></i>
                  Profile
                </a>
              </li>
              <li>
                <a href='user_profile.html'>
                  <i class='icon-cog'></i>
                  Settings
                </a>
              </li>
              <li class='divider'></li>
              <li>
                <a href='sign_in.html'>
                  <i class='icon-signout'></i>
                  Sign out
                </a>
              </li>
            </ul>
          </li>
        </ul>
        <form action='search_results.html' class='navbar-form navbar-right hidden-xs' method='get'>
          <button class='btn btn-link icon-search' name='button' type='submit'></button>
          <div class='form-group'>
            <input value="" class="form-control" placeholder="Search..." autocomplete="off" id="q_header" name="q" type="text" />
          </div>
        </form>
      </nav>
    </header>
    <div id='wrapper'>
      <div id='main-nav-bg'></div>
      <nav id='main-nav'>
        <div class='navigation'>
          <div class='search'>
            <form action='search_results.html' method='get'>
              <div class='search-wrapper'>
                <input value="" class="search-query form-control" placeholder="Search..." autocomplete="off" name="q" type="text" />
                <button class='btn btn-link icon-search' name='button' type='submit'></button>
              </div>
            </form>
          </div>
          <ul class='nav nav-stacked'>
            <li class=''>
              <a href='index.html'>
                <i class='icon-dashboard'></i>
                <span>Dashboard</span>
              </a>
            </li>
            <li class=''>
                      <a class="dropdown-collapse" href="#"><i class='icon-edit'></i>
              <span>Forms</span>
              <i class='icon-angle-down angle-down'></i>
              </a>
      
              <ul class='nav nav-stacked'>
                <li class=''>
                  <a href='form_styles.html'>
                    <i class='icon-caret-right'></i>
                    <span>Form styles and features</span>
                  </a>
                </li>
                <li class=''>
                  <a href='form_components.html'>
                    <i class='icon-caret-right'></i>
                    <span>Form components</span>
                  </a>
                </li>
                <li class=''>
                  <a href='validations.html'>
                    <i class='icon-caret-right'></i>
                    <span>Validations</span>
                  </a>
                </li>
                <li class=''>
                  <a href='wizard.html'>
                    <i class='icon-caret-right'></i>
                    <span>Wizard</span>
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a class='dropdown-collapse ' href='#'>
                <i class='icon-tint'></i>
                <span>UI Elements & Widgets</span>
                <i class='icon-angle-down angle-down'></i>
              </a>
              <ul class='nav nav-stacked'>
                <li class=''>
                  <a href='ui_elements.html'>
                    <i class='icon-caret-right'></i>
                    <span>UI Elements</span>
                  </a>
                </li>
                <li class=''>
                  <a href='widgets.html'>
                    <i class='icon-caret-right'></i>
                    <span>Widgets</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class='active'>
              <a href='buttons_and_icons.html'>
                <i class='icon-star'></i>
                <span>Buttons & Icons</span>
              </a>
            </li>
            <li>
              <a class='dropdown-collapse ' href='#'>
                <i class='icon-cogs'></i>
                <span>Components</span>
                <i class='icon-angle-down angle-down'></i>
              </a>
              <ul class='nav nav-stacked'>
                <li class=''>
                  <a href='charts.html'>
                    <i class='icon-bar-chart'></i>
                    <span>Charts</span>
                  </a>
                </li>
                <li class=''>
                  <a href='address_book.html'>
                    <i class='icon-envelope'></i>
                    <span>Address book</span>
                  </a>
                </li>
                <li class=''>
                  <a href='chats.html'>
                    <i class='icon-comments'></i>
                    <span>Chats</span>
                  </a>
                </li>
                <li class=''>
                  <a href='filetrees.html'>
                    <i class='icon-list-ul'></i>
                    <span>File trees</span>
                  </a>
                </li>
                <li class=''>
                  <a href='fileupload.html'>
                    <i class='icon-file'></i>
                    <span>Fileupload</span>
                  </a>
                </li>
                <li class=''>
                  <a href='todo.html'>
                    <i class='icon-list-alt'></i>
                    <span>Todo list</span>
                  </a>
                </li>
                <li class=''>
                  <a href='wysiwyg.html'>
                    <i class='icon-paste'></i>
                    <span>WYSIWYG</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class=''>
              <a href='tables.html'>
                <i class='icon-table'></i>
                <span>Tables</span>
              </a>
            </li>
            <li class=''>
              <a href='grid.html'>
                <i class='icon-th'></i>
                <span>Grid</span>
              </a>
            </li>
            <li class=''>
              <a href='type.html'>
                <i class='icon-font'></i>
                <span>Typography</span>
              </a>
            </li>
            <li class=''>
              <a href='calendar.html'>
                <i class='icon-calendar'></i>
                <span>Calendar</span>
              </a>
            </li>
            <li>
              <a class='dropdown-collapse ' href='#'>
                <i class='icon-book'></i>
                <span>Example pages</span>
                <i class='icon-angle-down angle-down'></i>
              </a>
              <ul class='nav nav-stacked'>
                <li class=''>
                  <a href='invoice.html'>
                    <i class='icon-money'></i>
                    <span>Invoice</span>
                  </a>
                </li>
                <li class=''>
                  <a href='gallery.html'>
                    <i class='icon-picture'></i>
                    <span>Gallery</span>
                  </a>
                </li>
                <li class=''>
                  <a href='timeline.html'>
                    <i class='icon-time'></i>
                    <span>Timeline</span>
                  </a>
                </li>
                <li class=''>
                  <a href='pricing_tables.html'>
                    <i class='icon-table'></i>
                    <span>Pricing tables</span>
                  </a>
                </li>
                <li class=''>
                  <a href='user_profile.html'>
                    <i class='icon-user'></i>
                    <span>User profile</span>
                  </a>
                </li>
                <li class=''>
                  <a href='err404.html' target='_blank'>
                    <i class='icon-question-sign'></i>
                    <span>404 Error</span>
                  </a>
                </li>
                <li class=''>
                  <a href='err500.html' target='_blank'>
                    <i class='icon-cogs'></i>
                    <span>500 Error</span>
                  </a>
                </li>
                <li class=''>
                  <a href='sign_in.html' target='_blank'>
                    <i class='icon-signin'></i>
                    <span>Sign in</span>
                  </a>
                </li>
                <li class=''>
                  <a href='faq.html'>
                    <i class='icon-bullhorn'></i>
                    <span>FAQ</span>
                  </a>
                </li>
                <li class=''>
                  <a href='orders.html'>
                    <i class='icon-inbox'></i>
                    <span>Orders</span>
                  </a>
                </li>
                <li class=''>
                  <a href='search_results.html'>
                    <i class='icon-search'></i>
                    <span>Search results</span>
                  </a>
                </li>
                <li class=''>
                  <a href='blank.html'>
                    <i class='icon-circle-blank'></i>
                    <span>Blank page</span>
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a class='dropdown-collapse ' href='#'>
                <i class='icon-cog'></i>
                <span>Layouts</span>
                <i class='icon-angle-down angle-down'></i>
              </a>
              <ul class='nav nav-stacked'>
                <li class=''>
                  <a href='closed_navigation.html'>
                    <i class='icon-caret-right'></i>
                    <span>Closed navigation</span>
                  </a>
                </li>
                <li class=''>
                  <a href='fixed_header.html'>
                    <i class='icon-caret-right'></i>
                    <span>Fixed header</span>
                  </a>
                </li>
                <li class=''>
                  <a href='fixed_navigation.html'>
                    <i class='icon-caret-right'></i>
                    <span>Fixed navigation</span>
                  </a>
                </li>
                <li class=''>
                  <a href='fixed_navigation_and_header.html'>
                    <i class='icon-caret-right'></i>
                    <span>Fixed navigation & header</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class=''>
              <a href='email_templates.html'>
                <i class='icon-mail-reply'></i>
                <span>Email templates</span>
              </a>
            </li>
            <li>
              <a class='dropdown-collapse' href='#'>
                <i class='icon-folder-open-alt'></i>
                <span>Four level dropdown</span>
                <i class='icon-angle-down angle-down'></i>
              </a>
              <ul class='nav nav-stacked'>
                <li>
                  <a class='dropdown-collapse' href='#'>
                    <i class='icon-caret-right'></i>
                    <span>Second level</span>
                    <i class='icon-angle-down angle-down'></i>
                  </a>
                  <ul class='nav nav-stacked'>
                    <li>
                      <a class='dropdown-collapse' href='#'>
                        <i class='icon-caret-right'></i>
                        <span>Third level</span>
                        <i class='icon-angle-down angle-down'></i>
                      </a>
                      <ul class='nav nav-stacked'>
                        <li>
                          <a href='#'>
                            <i class='icon-caret-right'></i>
                            <span>Fourth level</span>
                          </a>
                        </li>
                        <li>
                          <a href='#'>
                            <i class='icon-caret-right'></i>
                            <span>Another fourth level</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
      <section id='content'>
        <div class='container'>
          <div class='row' id='content-wrapper'>
            <div class='col-xs-12'>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='page-header'>
                    <h1 class='pull-left'>
                      <i class='icon-star'></i>
                      <span>Buttons & Icons</span>
                    </h1>
                    <div class='pull-right'>
                      <ul class='breadcrumb'>
                        <li>
                          <a href='index.html'>
                            <i class='icon-bar-chart'></i>
                          </a>
                        </li>
                        <li class='separator'>
                          <i class='icon-angle-right'></i>
                        </li>
                        <li class='active'>Buttons & Icons</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-6'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-check'></i>
                        Buttons
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <input class="btn" style="margin-bottom:5px" value="Default" type="button" />
                      <input class="btn btn-primary" style="margin-bottom:5px" value="Primary" type="button" />
                      <input class="btn btn-info" style="margin-bottom:5px" value="Info" type="button" />
                      <input class="btn btn-success" style="margin-bottom:5px" value="Success" type="button" />
                      <input class="btn btn-warning" style="margin-bottom:5px" value="Warning" type="button" />
                      <input class="btn btn-danger" style="margin-bottom:5px" value="Danger" type="button" />
                      <input class="btn btn-inverse" style="margin-bottom:5px" value="Inverse" type="button" />
                      <input class="btn btn-link" style="margin-bottom:5px" value="Link" type="button" />
                    </div>
                  </div>
                </div>
                <div class='col-sm-6'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-star-empty'></i>
                        Buttons with icons
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <button class='btn' style='margin-bottom:5px'>
                        <i class='icon-key'></i>
                        Default
                      </button>
                      <button class='btn btn-primary btn-lg' style='margin-bottom:5px'>
                        <i class='icon-beer'></i>
                        Primary
                      </button>
                      <button class='btn btn-info' style='margin-bottom:5px'>
                        Info
                        <i class='icon-bullseye'></i>
                      </button>
                      <button class='btn btn-warning btn-sm' style='margin-bottom:5px'>
                        <i class='icon-question-sign'></i>
                        Really?
                      </button>
                      <button class='btn btn-danger' style='margin-bottom:5px'>
                        <i class='icon-remove'></i>
                      </button>
                      <button class='btn btn-inverse btn-xs' style='margin-bottom:5px'>
                        <i class='icon-ambulance'></i>
                        Mini
                      </button>
                      <button class='btn btn-link btn-lg' style='margin-bottom:5px'>
                        Fire
                        <i class='icon-fire-extinguisher'></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-6'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-resize-full'></i>
                        Sizing
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <input class="btn btn-xs" style="margin-bottom:5px" value="Mini" type="button" />
                      <input class="btn btn-primary btn-sm" value="Small" type="button" />
                      <input class="btn btn-info" value="Default" type="button" />
                      <input class="btn btn-success btn-lg" value="Large" type="button" />
                      <hr class='hr-normal'>
                      <input class="btn btn-warning btn-lg" value="Large" type="button" />
                      <input class="btn btn-danger" value="Default" type="button" />
                      <input class="btn btn-inverse btn-sm" value="Small" type="button" />
                      <input class="btn btn-link btn-xs" value="Mini" type="button" />
                      <hr class='hr-normal'>
                      <input class="btn btn-danger btn-block btn-lg" value="Block" type="button" />
                    </div>
                  </div>
                </div>
                <div class='col-sm-6'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-eraser'></i>
                        Disabled buttons
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <input class="btn btn-xs disabled" value="Mini" type="button" />
                      <input class="btn btn-primary btn-sm disabled" value="Small" type="button" />
                      <input class="btn btn-info disabled" value="Default" type="button" />
                      <input class="btn btn-success btn-lg disabled" value="Large" type="button" />
                      <hr class='hr-normal'>
                      <input class="btn btn-warning btn-lg disabled" value="Large" type="button" />
                      <input class="btn btn-danger disabled" value="Default" type="button" />
                      <input class="btn btn-inverse btn-sm disabled" value="Small" type="button" />
                      <input class="btn btn-link btn-xs disabled" value="Mini" type="button" />
                      <hr class='hr-normal'>
                      <input class="btn btn-primary btn-block btn-lg disabled" value="Block" type="button" />
                    </div>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-6'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-code'></i>
                        Button groups
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <div class='btn-group'>
                        <button class='btn'>
                          <i class='icon-align-left'></i>
                        </button>
                        <button class='btn'>
                          <i class='icon-align-center'></i>
                        </button>
                        <button class='btn'>
                          <i class='icon-align-right'></i>
                        </button>
                      </div>
                      <hr class='hr-normal'>
                      <div class='btn-group-vertical'>
                        <button class='btn btn-danger'>
                          <i class='icon-star-empty'></i>
                        </button>
                        <button class='btn btn-primary'>
                          <i class='icon-star-empty'></i>
                        </button>
                        <button class='btn btn-success'>
                          <i class='icon-star-empty'></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class='col-sm-6'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>Quick links</div>
                    </div>
                    <div class='box-content'>
                      <div class='row'>
                        <div class='col-sm-3'>
                          <div class='box-quick-link blue-background'>
                            <a>
                              <div class='header'>
                                <div class='icon-comments'></div>
                              </div>
                              <div class='content'>Comments</div>
                            </a>
                          </div>
                        </div>
                        <div class='col-sm-3'>
                          <div class='box-quick-link green-background'>
                            <a>
                              <div class='header'>
                                <div class='icon-star'></div>
                              </div>
                              <div class='content'>Veeeery long title of this quick link</div>
                            </a>
                          </div>
                        </div>
                        <div class='col-sm-3'>
                          <div class='box-quick-link orange-background'>
                            <a>
                              <div class='header'>
                                <div class='icon-magic'></div>
                              </div>
                              <div class='content'>Magic</div>
                            </a>
                          </div>
                        </div>
                        <div class='col-sm-3'>
                          <div class='box-quick-link red-background'>
                            <a>
                              <div class='header'>
                                <div class='icon-inbox'></div>
                              </div>
                              <div class='content'>Orders</div>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='group-header'>
                <div class='row'>
                  <div class='col-sm-6 col-sm-offset-3'>
                    <div class='text-center'>
                      <h2>Dropdowns</h2>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-6'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>Classic dropdowns</div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <div class='btn-toolbar'>
                        <div class='btn-group dropdown'>
                          <button class='btn dropdown-toggle' data-toggle='dropdown' style='margin-bottom:5px'>
                            Action
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown'>
                          <button class='btn btn-primary dropdown-toggle' data-toggle='dropdown' style='margin-bottom:5px'>
                            Action
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown'>
                          <button class='btn btn-danger dropdown-toggle' data-toggle='dropdown' style='margin-bottom:5px'>
                            Danger
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown'>
                          <button class='btn btn-warning dropdown-toggle' data-toggle='dropdown' style='margin-bottom:5px'>
                            Warning
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown'>
                          <button class='btn btn-success dropdown-toggle' data-toggle='dropdown' style='margin-bottom:5px'>
                            Success
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown'>
                          <button class='btn btn-info dropdown-toggle' data-toggle='dropdown' style='margin-bottom:5px'>
                            Info
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown'>
                          <button class='btn btn-inverse dropdown-toggle' data-toggle='dropdown' style='margin-bottom:5px'>
                            Inverse
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class='col-sm-6'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>With icons</div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <div class='btn-toolbar'>
                        <div class='btn-group dropdown'>
                          <button class='btn dropdown-toggle' data-toggle='dropdown' style='margin-bottom:5px'>
                            <i class='icon-camera-retro'></i>
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown'>
                          <button class='btn btn-primary dropdown-toggle' data-toggle='dropdown' style='margin-bottom:5px'>
                            <i class='icon-camera-retro'></i>
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown'>
                          <button class='btn btn-danger dropdown-toggle' data-toggle='dropdown' style='margin-bottom:5px'>
                            <i class='icon-camera-retro'></i>
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown'>
                          <button class='btn btn-warning dropdown-toggle' data-toggle='dropdown' style='margin-bottom:5px'>
                            <i class='icon-camera-retro'></i>
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown'>
                          <button class='btn btn-success dropdown-toggle' data-toggle='dropdown' style='margin-bottom:5px'>
                            <i class='icon-camera-retro'></i>
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown'>
                          <button class='btn btn-info dropdown-toggle' data-toggle='dropdown' style='margin-bottom:5px'>
                            <i class='icon-camera-retro'></i>
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown'>
                          <button class='btn btn-inverse dropdown-toggle' data-toggle='dropdown' style='margin-bottom:5px'>
                            <i class='icon-camera-retro'></i>
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-6'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>Works with all button sizes</div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <div class='btn-toolbar'>
                        <div class='btn-group dropdown'>
                          <button class='btn btn-lg dropdown-toggle' data-toggle='dropdown'>
                            Large button
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown'>
                          <button class='btn btn-sm dropdown-toggle' data-toggle='dropdown'>
                            Small button
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown'>
                          <button class='btn btn-xs dropdown-toggle' data-toggle='dropdown'>
                            Mini button
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class='col-sm-6'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>Split buttons</div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <div class='btn-toolbar' style='margin: 0;'>
                        <div class='btn-group dropdown' style='margin-bottom:5px'>
                          <button class='btn'>Action</button>
                          <button class='btn dropdown-toggle' data-toggle='dropdown'>
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown' style='margin-bottom:5px'>
                          <button class='btn btn-primary'>Action</button>
                          <button class='btn btn-primary dropdown-toggle' data-toggle='dropdown'>
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown' style='margin-bottom:5px'>
                          <button class='btn btn-danger'>Danger</button>
                          <button class='btn btn-danger dropdown-toggle' data-toggle='dropdown'>
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown' style='margin-bottom:5px'>
                          <button class='btn btn-warning'>Warning</button>
                          <button class='btn btn-warning dropdown-toggle' data-toggle='dropdown'>
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown' style='margin-bottom:5px'>
                          <button class='btn btn-success'>Success</button>
                          <button class='btn btn-success dropdown-toggle' data-toggle='dropdown'>
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown' style='margin-bottom:5px'>
                          <button class='btn btn-info'>Info</button>
                          <button class='btn btn-info dropdown-toggle' data-toggle='dropdown'>
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown' style='margin-bottom:5px'>
                          <button class='btn btn-inverse'>Inverse</button>
                          <button class='btn btn-inverse dropdown-toggle' data-toggle='dropdown'>
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr class='hr-double'>
              <div class='row'>
                <div class='col-sm-6'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>Dropups</div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <div class='btn-toolbar'>
                        <div class='btn-group dropdown dropup'>
                          <button class='btn'>Dropup</button>
                          <button class='btn dropdown-toggle' data-toggle='dropdown'>
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                        <div class='btn-group dropdown dropup'>
                          <button class='btn btn-primary'>Right dropup</button>
                          <button class='btn btn-primary dropdown-toggle' data-toggle='dropdown'>
                            <span class='caret'></span>
                          </button>
                          <ul class='dropdown-menu pull-right'>
                            <li>
                              <a href='#'>Action</a>
                            </li>
                            <li>
                              <a href='#'>Another action</a>
                            </li>
                            <li>
                              <a href='#'>Something else here</a>
                            </li>
                            <li class='divider'></li>
                            <li>
                              <a href='#'>Separated link</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class='col-sm-6'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>Hovered dropdown</div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content'>
                      <div class='btn-group dropdown'>
                        <button class='btn dropdown-toggle' data-delay='100' data-hover='dropdown' data-toggle='dropdown'>
                          Opens on hover
                          <span class='caret'></span>
                        </button>
                        <ul class='dropdown-menu'>
                          <li>
                            <a href='#'>Action</a>
                          </li>
                          <li>
                            <a href='#'>Another action</a>
                          </li>
                          <li>
                            <a href='#'>Something else here</a>
                          </li>
                          <li class='divider'></li>
                          <li>
                            <a href='#'>Separated link</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='group-header'>
                <div class='row'>
                  <div class='col-sm-6 col-sm-offset-3'>
                    <div class='text-center'>
                      <h2>Icons</h2>
                      <small class='text-muted'>Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-keyboard'></i>
                        New in Font Awesome 3.2.1
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content box-padding'>
                      <div class='row'>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-compass'></i>
                              icon-compass
                            </li>
                            <li>
                              <i class='icon-collapse'></i>
                              icon-collapse
                            </li>
                            <li>
                              <i class='icon-collapse-top'></i>
                              icon-collapse-top
                            </li>
                            <li>
                              <i class='icon-expand'></i>
                              icon-expand
                            </li>
                            <li>
                              <i class='icon-eur'></i>
                              icon-eur
                            </li>
                            <li>
                              <i class='icon-euro'></i>
                              icon-euro (alias)
                            </li>
                            <li>
                              <i class='icon-gbp'></i>
                              icon-gbp
                            </li>
                            <li>
                              <i class='icon-usd'></i>
                              icon-usd
                            </li>
                            <li>
                              <i class='icon-dollar'></i>
                              icon-dollar (alias)
                            </li>
                            <li>
                              <i class='icon-inr'></i>
                              icon-inr
                            </li>
                            <li>
                              <i class='icon-rupee'></i>
                              icon-rupee (alias)
                            </li>
                            <li>
                              <i class='icon-jpy'></i>
                              icon-jpy
                            </li>
                            <li>
                              <i class='icon-yen'></i>
                              icon-yen (alias)
                            </li>
                            <li>
                              <i class='icon-cny'></i>
                              icon-cny
                            </li>
                            <li>
                              <i class='icon-renminbi'></i>
                              icon-renminbi (alias)
                            </li>
                            <li>
                              <i class='icon-krw'></i>
                              icon-krw
                            </li>
                            <li>
                              <i class='icon-won'></i>
                              icon-won (alias)
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-btc'></i>
                              icon-btc
                            </li>
                            <li>
                              <i class='icon-bitcoin'></i>
                              icon-bitcoin (alias)
                            </li>
                            <li>
                              <i class='icon-file'></i>
                              icon-file
                            </li>
                            <li>
                              <i class='icon-file-text'></i>
                              icon-file-text
                            </li>
                            <li>
                              <i class='icon-sort-by-alphabet'></i>
                              icon-sort-by-alphabet
                            </li>
                            <li>
                              <i class='icon-sort-by-alphabet-alt'></i>
                              icon-sort-by-alphabet-alt
                            </li>
                            <li>
                              <i class='icon-sort-by-attributes'></i>
                              icon-sort-by-attributes
                            </li>
                            <li>
                              <i class='icon-sort-by-attributes-alt'></i>
                              icon-sort-by-attributes-alt
                            </li>
                            <li>
                              <i class='icon-sort-by-order'></i>
                              icon-sort-by-order
                            </li>
                            <li>
                              <i class='icon-sort-by-order-alt'></i>
                              icon-sort-by-order-alt
                            </li>
                            <li>
                              <i class='icon-thumbs-up'></i>
                              icon-thumbs-up
                            </li>
                            <li>
                              <i class='icon-thumbs-down'></i>
                              icon-thumbs-down
                            </li>
                            <li>
                              <i class='icon-youtube-sign'></i>
                              icon-youtube-sign
                            </li>
                            <li>
                              <i class='icon-youtube'></i>
                              icon-youtube
                            </li>
                            <li>
                              <i class='icon-xing'></i>
                              icon-xing
                            </li>
                            <li>
                              <i class='icon-xing-sign'></i>
                              icon-xing-sign
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-youtube-play'></i>
                              icon-youtube-play
                            </li>
                            <li>
                              <i class='icon-dropbox'></i>
                              icon-dropbox
                            </li>
                            <li>
                              <i class='icon-stackexchange'></i>
                              icon-stackexchange
                            </li>
                            <li>
                              <i class='icon-instagram'></i>
                              icon-instagram
                            </li>
                            <li>
                              <i class='icon-flickr'></i>
                              icon-flickr
                            </li>
                            <li>
                              <i class='icon-adn'></i>
                              icon-adn
                            </li>
                            <li>
                              <i class='icon-bitbucket'></i>
                              icon-bitbucket
                            </li>
                            <li>
                              <i class='icon-bitbucket-sign'></i>
                              icon-bitbucket-sign
                            </li>
                            <li>
                              <i class='icon-tumblr'></i>
                              icon-tumblr
                            </li>
                            <li>
                              <i class='icon-tumblr-sign'></i>
                              icon-tumblr-sign
                            </li>
                            <li>
                              <i class='icon-long-arrow-down'></i>
                              icon-long-arrow-down
                            </li>
                            <li>
                              <i class='icon-long-arrow-up'></i>
                              icon-long-arrow-up
                            </li>
                            <li>
                              <i class='icon-long-arrow-left'></i>
                              icon-long-arrow-left
                            </li>
                            <li>
                              <i class='icon-long-arrow-right'></i>
                              icon-long-arrow-right
                            </li>
                            <li>
                              <i class='icon-apple'></i>
                              icon-apple
                            </li>
                            <li>
                              <i class='icon-windows'></i>
                              icon-windows
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-android'></i>
                              icon-android
                            </li>
                            <li>
                              <i class='icon-linux'></i>
                              icon-linux
                            </li>
                            <li>
                              <i class='icon-dribbble'></i>
                              icon-dribbble
                            </li>
                            <li>
                              <i class='icon-skype'></i>
                              icon-skype
                            </li>
                            <li>
                              <i class='icon-foursquare'></i>
                              icon-foursquare
                            </li>
                            <li>
                              <i class='icon-trello'></i>
                              icon-trello
                            </li>
                            <li>
                              <i class='icon-female'></i>
                              icon-female
                            </li>
                            <li>
                              <i class='icon-male'></i>
                              icon-male
                            </li>
                            <li>
                              <i class='icon-gittip'></i>
                              icon-gittip
                            </li>
                            <li>
                              <i class='icon-sun'></i>
                              icon-sun
                            </li>
                            <li>
                              <i class='icon-moon'></i>
                              icon-moon
                            </li>
                            <li>
                              <i class='icon-archive'></i>
                              icon-archive
                            </li>
                            <li>
                              <i class='icon-bug'></i>
                              icon-bug
                            </li>
                            <li>
                              <i class='icon-vk'></i>
                              icon-vk
                            </li>
                            <li>
                              <i class='icon-weibo'></i>
                              icon-weibo
                            </li>
                            <li>
                              <i class='icon-renren'></i>
                              icon-renren
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-beaker'></i>
                        Web application icons
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content box-padding'>
                      <div class='row'>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-adjust'></i>
                              icon-adjust
                            </li>
                            <li>
                              <i class='icon-anchor'></i>
                              icon-anchor
                            </li>
                            <li>
                              <i class='icon-archive'></i>
                              icon-archive
                            </li>
                            <li>
                              <i class='icon-asterisk'></i>
                              icon-asterisk
                            </li>
                            <li>
                              <i class='icon-ban-circle'></i>
                              icon-ban-circle
                            </li>
                            <li>
                              <i class='icon-bar-chart'></i>
                              icon-bar-chart
                            </li>
                            <li>
                              <i class='icon-barcode'></i>
                              icon-barcode
                            </li>
                            <li>
                              <i class='icon-beaker'></i>
                              icon-beaker
                            </li>
                            <li>
                              <i class='icon-beer'></i>
                              icon-beer
                            </li>
                            <li>
                              <i class='icon-bell'></i>
                              icon-bell
                            </li>
                            <li>
                              <i class='icon-bell-alt'></i>
                              icon-bell-alt
                            </li>
                            <li>
                              <i class='icon-bolt'></i>
                              icon-bolt
                            </li>
                            <li>
                              <i class='icon-book'></i>
                              icon-book
                            </li>
                            <li>
                              <i class='icon-bookmark'></i>
                              icon-bookmark
                            </li>
                            <li>
                              <i class='icon-bookmark-empty'></i>
                              icon-bookmark-empty
                            </li>
                            <li>
                              <i class='icon-briefcase'></i>
                              icon-briefcase
                            </li>
                            <li>
                              <i class='icon-bug'></i>
                              icon-bug
                            </li>
                            <li>
                              <i class='icon-building'></i>
                              icon-building
                            </li>
                            <li>
                              <i class='icon-bullhorn'></i>
                              icon-bullhorn
                            </li>
                            <li>
                              <i class='icon-bullseye'></i>
                              icon-bullseye
                            </li>
                            <li>
                              <i class='icon-calendar'></i>
                              icon-calendar
                            </li>
                            <li>
                              <i class='icon-calendar-empty'></i>
                              icon-calendar-empty
                            </li>
                            <li>
                              <i class='icon-camera'></i>
                              icon-camera
                            </li>
                            <li>
                              <i class='icon-camera-retro'></i>
                              icon-camera-retro
                            </li>
                            <li>
                              <i class='icon-certificate'></i>
                              icon-certificate
                            </li>
                            <li>
                              <i class='icon-check'></i>
                              icon-check
                            </li>
                            <li>
                              <i class='icon-check-empty'></i>
                              icon-check-empty
                            </li>
                            <li>
                              <i class='icon-check-minus'></i>
                              icon-check-minus
                            </li>
                            <li>
                              <i class='icon-check-sign'></i>
                              icon-check-sign
                            </li>
                            <li>
                              <i class='icon-circle'></i>
                              icon-circle
                            </li>
                            <li>
                              <i class='icon-circle-blank'></i>
                              icon-circle-blank
                            </li>
                            <li>
                              <i class='icon-cloud'></i>
                              icon-cloud
                            </li>
                            <li>
                              <i class='icon-cloud-download'></i>
                              icon-cloud-download
                            </li>
                            <li>
                              <i class='icon-cloud-upload'></i>
                              icon-cloud-upload
                            </li>
                            <li>
                              <i class='icon-code'></i>
                              icon-code
                            </li>
                            <li>
                              <i class='icon-code-fork'></i>
                              icon-code-fork
                            </li>
                            <li>
                              <i class='icon-coffee'></i>
                              icon-coffee
                            </li>
                            <li>
                              <i class='icon-cog'></i>
                              icon-cog
                            </li>
                            <li>
                              <i class='icon-cogs'></i>
                              icon-cogs
                            </li>
                            <li>
                              <i class='icon-collapse'></i>
                              icon-collapse
                            </li>
                            <li>
                              <i class='icon-collapse-alt'></i>
                              icon-collapse-alt
                            </li>
                            <li>
                              <i class='icon-collapse-top'></i>
                              icon-collapse-top
                            </li>
                            <li>
                              <i class='icon-comment'></i>
                              icon-comment
                            </li>
                            <li>
                              <i class='icon-comment-alt'></i>
                              icon-comment-alt
                            </li>
                            <li>
                              <i class='icon-comments'></i>
                              icon-comments
                            </li>
                            <li>
                              <i class='icon-comments-alt'></i>
                              icon-comments-alt
                            </li>
                            <li>
                              <i class='icon-compass'></i>
                              icon-compass
                            </li>
                            <li>
                              <i class='icon-credit-card'></i>
                              icon-credit-card
                            </li>
                            <li>
                              <i class='icon-crop'></i>
                              icon-crop
                            </li>
                            <li>
                              <i class='icon-dashboard'></i>
                              icon-dashboard
                            </li>
                            <li>
                              <i class='icon-desktop'></i>
                              icon-desktop
                            </li>
                            <li>
                              <i class='icon-download'></i>
                              icon-download
                            </li>
                            <li>
                              <i class='icon-download-alt'></i>
                              icon-download-alt
                            </li>
                            <li>
                              <i class='icon-edit'></i>
                              icon-edit
                            </li>
                            <li>
                              <i class='icon-edit-sign'></i>
                              icon-edit-sign
                            </li>
                            <li>
                              <i class='icon-ellipsis-horizontal'></i>
                              icon-ellipsis-horizontal
                            </li>
                            <li>
                              <i class='icon-ellipsis-vertical'></i>
                              icon-ellipsis-vertical
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-envelope'></i>
                              icon-envelope
                            </li>
                            <li>
                              <i class='icon-envelope-alt'></i>
                              icon-envelope-alt
                            </li>
                            <li>
                              <i class='icon-eraser'></i>
                              icon-eraser
                            </li>
                            <li>
                              <i class='icon-exchange'></i>
                              icon-exchange
                            </li>
                            <li>
                              <i class='icon-exclamation'></i>
                              icon-exclamation
                            </li>
                            <li>
                              <i class='icon-exclamation-sign'></i>
                              icon-exclamation-sign
                            </li>
                            <li>
                              <i class='icon-expand'></i>
                              icon-expand
                            </li>
                            <li>
                              <i class='icon-expand-alt'></i>
                              icon-expand-alt
                            </li>
                            <li>
                              <i class='icon-external-link'></i>
                              icon-external-link
                            </li>
                            <li>
                              <i class='icon-external-link-sign'></i>
                              icon-external-link-sign
                            </li>
                            <li>
                              <i class='icon-eye-close'></i>
                              icon-eye-close
                            </li>
                            <li>
                              <i class='icon-eye-open'></i>
                              icon-eye-open
                            </li>
                            <li>
                              <i class='icon-facetime-video'></i>
                              icon-facetime-video
                            </li>
                            <li>
                              <i class='icon-female'></i>
                              icon-female
                            </li>
                            <li>
                              <i class='icon-fighter-jet'></i>
                              icon-fighter-jet
                            </li>
                            <li>
                              <i class='icon-film'></i>
                              icon-film
                            </li>
                            <li>
                              <i class='icon-filter'></i>
                              icon-filter
                            </li>
                            <li>
                              <i class='icon-fire'></i>
                              icon-fire
                            </li>
                            <li>
                              <i class='icon-fire-extinguisher'></i>
                              icon-fire-extinguisher
                            </li>
                            <li>
                              <i class='icon-flag'></i>
                              icon-flag
                            </li>
                            <li>
                              <i class='icon-flag-alt'></i>
                              icon-flag-alt
                            </li>
                            <li>
                              <i class='icon-flag-checkered'></i>
                              icon-flag-checkered
                            </li>
                            <li>
                              <i class='icon-folder-close'></i>
                              icon-folder-close
                            </li>
                            <li>
                              <i class='icon-folder-close-alt'></i>
                              icon-folder-close-alt
                            </li>
                            <li>
                              <i class='icon-folder-open'></i>
                              icon-folder-open
                            </li>
                            <li>
                              <i class='icon-folder-open-alt'></i>
                              icon-folder-open-alt
                            </li>
                            <li>
                              <i class='icon-food'></i>
                              icon-food
                            </li>
                            <li>
                              <i class='icon-frown'></i>
                              icon-frown
                            </li>
                            <li>
                              <i class='icon-gamepad'></i>
                              icon-gamepad
                            </li>
                            <li>
                              <i class='icon-gear'></i>
                              icon-gear (alias)
                            </li>
                            <li>
                              <i class='icon-gears'></i>
                              icon-gears (alias)
                            </li>
                            <li>
                              <i class='icon-gift'></i>
                              icon-gift
                            </li>
                            <li>
                              <i class='icon-glass'></i>
                              icon-glass
                            </li>
                            <li>
                              <i class='icon-globe'></i>
                              icon-globe
                            </li>
                            <li>
                              <i class='icon-group'></i>
                              icon-group
                            </li>
                            <li>
                              <i class='icon-hdd'></i>
                              icon-hdd
                            </li>
                            <li>
                              <i class='icon-headphones'></i>
                              icon-headphones
                            </li>
                            <li>
                              <i class='icon-heart'></i>
                              icon-heart
                            </li>
                            <li>
                              <i class='icon-heart-empty'></i>
                              icon-heart-empty
                            </li>
                            <li>
                              <i class='icon-home'></i>
                              icon-home
                            </li>
                            <li>
                              <i class='icon-inbox'></i>
                              icon-inbox
                            </li>
                            <li>
                              <i class='icon-info'></i>
                              icon-info
                            </li>
                            <li>
                              <i class='icon-info-sign'></i>
                              icon-info-sign
                            </li>
                            <li>
                              <i class='icon-key'></i>
                              icon-key
                            </li>
                            <li>
                              <i class='icon-keyboard'></i>
                              icon-keyboard
                            </li>
                            <li>
                              <i class='icon-laptop'></i>
                              icon-laptop
                            </li>
                            <li>
                              <i class='icon-leaf'></i>
                              icon-leaf
                            </li>
                            <li>
                              <i class='icon-legal'></i>
                              icon-legal
                            </li>
                            <li>
                              <i class='icon-lemon'></i>
                              icon-lemon
                            </li>
                            <li>
                              <i class='icon-level-down'></i>
                              icon-level-down
                            </li>
                            <li>
                              <i class='icon-level-up'></i>
                              icon-level-up
                            </li>
                            <li>
                              <i class='icon-lightbulb'></i>
                              icon-lightbulb
                            </li>
                            <li>
                              <i class='icon-location-arrow'></i>
                              icon-location-arrow
                            </li>
                            <li>
                              <i class='icon-lock'></i>
                              icon-lock
                            </li>
                            <li>
                              <i class='icon-magic'></i>
                              icon-magic
                            </li>
                            <li>
                              <i class='icon-magnet'></i>
                              icon-magnet
                            </li>
                            <li>
                              <i class='icon-mail-forward'></i>
                              icon-mail-forward (alias)
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-mail-reply'></i>
                              icon-mail-reply (alias)
                            </li>
                            <li>
                              <i class='icon-mail-reply-all'></i>
                              icon-mail-reply-all
                            </li>
                            <li>
                              <i class='icon-male'></i>
                              icon-male
                            </li>
                            <li>
                              <i class='icon-map-marker'></i>
                              icon-map-marker
                            </li>
                            <li>
                              <i class='icon-meh'></i>
                              icon-meh
                            </li>
                            <li>
                              <i class='icon-microphone'></i>
                              icon-microphone
                            </li>
                            <li>
                              <i class='icon-microphone-off'></i>
                              icon-microphone-off
                            </li>
                            <li>
                              <i class='icon-minus'></i>
                              icon-minus
                            </li>
                            <li>
                              <i class='icon-minus-sign'></i>
                              icon-minus-sign
                            </li>
                            <li>
                              <i class='icon-minus-sign-alt'></i>
                              icon-minus-sign-alt
                            </li>
                            <li>
                              <i class='icon-mobile-phone'></i>
                              icon-mobile-phone
                            </li>
                            <li>
                              <i class='icon-money'></i>
                              icon-money
                            </li>
                            <li>
                              <i class='icon-moon'></i>
                              icon-moon
                            </li>
                            <li>
                              <i class='icon-move'></i>
                              icon-move
                            </li>
                            <li>
                              <i class='icon-music'></i>
                              icon-music
                            </li>
                            <li>
                              <i class='icon-off'></i>
                              icon-off
                            </li>
                            <li>
                              <i class='icon-ok'></i>
                              icon-ok
                            </li>
                            <li>
                              <i class='icon-ok-circle'></i>
                              icon-ok-circle
                            </li>
                            <li>
                              <i class='icon-ok-sign'></i>
                              icon-ok-sign
                            </li>
                            <li>
                              <i class='icon-pencil'></i>
                              icon-pencil
                            </li>
                            <li>
                              <i class='icon-phone'></i>
                              icon-phone
                            </li>
                            <li>
                              <i class='icon-phone-sign'></i>
                              icon-phone-sign
                            </li>
                            <li>
                              <i class='icon-picture'></i>
                              icon-picture
                            </li>
                            <li>
                              <i class='icon-plane'></i>
                              icon-plane
                            </li>
                            <li>
                              <i class='icon-plus'></i>
                              icon-plus
                            </li>
                            <li>
                              <i class='icon-plus-sign'></i>
                              icon-plus-sign
                            </li>
                            <li>
                              <i class='icon-plus-sign-alt'></i>
                              icon-plus-sign-alt
                            </li>
                            <li>
                              <i class='icon-power-off'></i>
                              icon-power-off (alias)
                            </li>
                            <li>
                              <i class='icon-print'></i>
                              icon-print
                            </li>
                            <li>
                              <i class='icon-pushpin'></i>
                              icon-pushpin
                            </li>
                            <li>
                              <i class='icon-puzzle-piece'></i>
                              icon-puzzle-piece
                            </li>
                            <li>
                              <i class='icon-qrcode'></i>
                              icon-qrcode
                            </li>
                            <li>
                              <i class='icon-question'></i>
                              icon-question
                            </li>
                            <li>
                              <i class='icon-question-sign'></i>
                              icon-question-sign
                            </li>
                            <li>
                              <i class='icon-quote-left'></i>
                              icon-quote-left
                            </li>
                            <li>
                              <i class='icon-quote-right'></i>
                              icon-quote-right
                            </li>
                            <li>
                              <i class='icon-random'></i>
                              icon-random
                            </li>
                            <li>
                              <i class='icon-refresh'></i>
                              icon-refresh
                            </li>
                            <li>
                              <i class='icon-remove'></i>
                              icon-remove
                            </li>
                            <li>
                              <i class='icon-remove-circle'></i>
                              icon-remove-circle
                            </li>
                            <li>
                              <i class='icon-remove-sign'></i>
                              icon-remove-sign
                            </li>
                            <li>
                              <i class='icon-reorder'></i>
                              icon-reorder
                            </li>
                            <li>
                              <i class='icon-reply'></i>
                              icon-reply
                            </li>
                            <li>
                              <i class='icon-reply-all'></i>
                              icon-reply-all
                            </li>
                            <li>
                              <i class='icon-resize-horizontal'></i>
                              icon-resize-horizontal
                            </li>
                            <li>
                              <i class='icon-resize-vertical'></i>
                              icon-resize-vertical
                            </li>
                            <li>
                              <i class='icon-retweet'></i>
                              icon-retweet
                            </li>
                            <li>
                              <i class='icon-road'></i>
                              icon-road
                            </li>
                            <li>
                              <i class='icon-rocket'></i>
                              icon-rocket
                            </li>
                            <li>
                              <i class='icon-rss'></i>
                              icon-rss
                            </li>
                            <li>
                              <i class='icon-rss-sign'></i>
                              icon-rss-sign
                            </li>
                            <li>
                              <i class='icon-screenshot'></i>
                              icon-screenshot
                            </li>
                            <li>
                              <i class='icon-search'></i>
                              icon-search
                            </li>
                            <li>
                              <i class='icon-share'></i>
                              icon-share
                            </li>
                            <li>
                              <i class='icon-share-alt'></i>
                              icon-share-alt
                            </li>
                            <li>
                              <i class='icon-share-sign'></i>
                              icon-share-sign
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-shield'></i>
                              icon-shield
                            </li>
                            <li>
                              <i class='icon-shopping-cart'></i>
                              icon-shopping-cart
                            </li>
                            <li>
                              <i class='icon-sign-blank'></i>
                              icon-sign-blank
                            </li>
                            <li>
                              <i class='icon-signal'></i>
                              icon-signal
                            </li>
                            <li>
                              <i class='icon-signin'></i>
                              icon-signin
                            </li>
                            <li>
                              <i class='icon-signout'></i>
                              icon-signout
                            </li>
                            <li>
                              <i class='icon-sitemap'></i>
                              icon-sitemap
                            </li>
                            <li>
                              <i class='icon-smile'></i>
                              icon-smile
                            </li>
                            <li>
                              <i class='icon-sort'></i>
                              icon-sort
                            </li>
                            <li>
                              <i class='icon-sort-by-alphabet'></i>
                              icon-sort-by-alphabet
                            </li>
                            <li>
                              <i class='icon-sort-by-alphabet-alt'></i>
                              icon-sort-by-alphabet-alt
                            </li>
                            <li>
                              <i class='icon-sort-by-attributes'></i>
                              icon-sort-by-attributes
                            </li>
                            <li>
                              <i class='icon-sort-by-attributes-alt'></i>
                              icon-sort-by-attributes-alt
                            </li>
                            <li>
                              <i class='icon-sort-by-order'></i>
                              icon-sort-by-order
                            </li>
                            <li>
                              <i class='icon-sort-by-order-alt'></i>
                              icon-sort-by-order-alt
                            </li>
                            <li>
                              <i class='icon-sort-down'></i>
                              icon-sort-down
                            </li>
                            <li>
                              <i class='icon-sort-up'></i>
                              icon-sort-up
                            </li>
                            <li>
                              <i class='icon-spinner'></i>
                              icon-spinner
                            </li>
                            <li>
                              <i class='icon-star'></i>
                              icon-star
                            </li>
                            <li>
                              <i class='icon-star-empty'></i>
                              icon-star-empty
                            </li>
                            <li>
                              <i class='icon-star-half'></i>
                              icon-star-half
                            </li>
                            <li>
                              <i class='icon-star-half-empty'></i>
                              icon-star-half-empty
                            </li>
                            <li>
                              <i class='icon-star-half-full'></i>
                              icon-star-half-full (alias)
                            </li>
                            <li>
                              <i class='icon-subscript'></i>
                              icon-subscript
                            </li>
                            <li>
                              <i class='icon-suitcase'></i>
                              icon-suitcase
                            </li>
                            <li>
                              <i class='icon-sun'></i>
                              icon-sun
                            </li>
                            <li>
                              <i class='icon-superscript'></i>
                              icon-superscript
                            </li>
                            <li>
                              <i class='icon-tablet'></i>
                              icon-tablet
                            </li>
                            <li>
                              <i class='icon-tag'></i>
                              icon-tag
                            </li>
                            <li>
                              <i class='icon-tags'></i>
                              icon-tags
                            </li>
                            <li>
                              <i class='icon-tasks'></i>
                              icon-tasks
                            </li>
                            <li>
                              <i class='icon-terminal'></i>
                              icon-terminal
                            </li>
                            <li>
                              <i class='icon-thumbs-down'></i>
                              icon-thumbs-down
                            </li>
                            <li>
                              <i class='icon-thumbs-down-alt'></i>
                              icon-thumbs-down-alt
                            </li>
                            <li>
                              <i class='icon-thumbs-up'></i>
                              icon-thumbs-up
                            </li>
                            <li>
                              <i class='icon-thumbs-up-alt'></i>
                              icon-thumbs-up-alt
                            </li>
                            <li>
                              <i class='icon-ticket'></i>
                              icon-ticket
                            </li>
                            <li>
                              <i class='icon-time'></i>
                              icon-time
                            </li>
                            <li>
                              <i class='icon-tint'></i>
                              icon-tint
                            </li>
                            <li>
                              <i class='icon-trash'></i>
                              icon-trash
                            </li>
                            <li>
                              <i class='icon-trophy'></i>
                              icon-trophy
                            </li>
                            <li>
                              <i class='icon-truck'></i>
                              icon-truck
                            </li>
                            <li>
                              <i class='icon-umbrella'></i>
                              icon-umbrella
                            </li>
                            <li>
                              <i class='icon-unchecked'></i>
                              icon-unchecked (alias)
                            </li>
                            <li>
                              <i class='icon-unlock'></i>
                              icon-unlock
                            </li>
                            <li>
                              <i class='icon-unlock-alt'></i>
                              icon-unlock-alt
                            </li>
                            <li>
                              <i class='icon-upload'></i>
                              icon-upload
                            </li>
                            <li>
                              <i class='icon-upload-alt'></i>
                              icon-upload-alt
                            </li>
                            <li>
                              <i class='icon-user'></i>
                              icon-user
                            </li>
                            <li>
                              <i class='icon-volume-down'></i>
                              icon-volume-down
                            </li>
                            <li>
                              <i class='icon-volume-off'></i>
                              icon-volume-off
                            </li>
                            <li>
                              <i class='icon-volume-up'></i>
                              icon-volume-up
                            </li>
                            <li>
                              <i class='icon-warning-sign'></i>
                              icon-warning-sign
                            </li>
                            <li>
                              <i class='icon-wrench'></i>
                              icon-wrench
                            </li>
                            <li>
                              <i class='icon-zoom-in'></i>
                              icon-zoom-in
                            </li>
                            <li>
                              <i class='icon-zoom-out'></i>
                              icon-zoom-out
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-euro'></i>
                        Currency icons
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content box-padding'>
                      <div class='row'>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-bitcoin'></i>
                              icon-bitcoin (alias)
                            </li>
                            <li>
                              <i class='icon-btc'></i>
                              icon-btc
                            </li>
                            <li>
                              <i class='icon-cny'></i>
                              icon-cny
                            </li>
                            <li>
                              <i class='icon-dollar'></i>
                              icon-dollar (alias)
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-eur'></i>
                              icon-eur
                            </li>
                            <li>
                              <i class='icon-euro'></i>
                              icon-euro (alias)
                            </li>
                            <li>
                              <i class='icon-gbp'></i>
                              icon-gbp
                            </li>
                            <li>
                              <i class='icon-inr'></i>
                              icon-inr
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-jpy'></i>
                              icon-jpy
                            </li>
                            <li>
                              <i class='icon-krw'></i>
                              icon-krw
                            </li>
                            <li>
                              <i class='icon-renminbi'></i>
                              icon-renminbi (alias)
                            </li>
                            <li>
                              <i class='icon-rupee'></i>
                              icon-rupee (alias)
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-usd'></i>
                              icon-usd
                            </li>
                            <li>
                              <i class='icon-won'></i>
                              icon-won (alias)
                            </li>
                            <li>
                              <i class='icon-yen'></i>
                              icon-yen (alias)
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-copy'></i>
                        Text editor icons
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content box-padding'>
                      <div class='row'>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-align-center'></i>
                              icon-align-center
                            </li>
                            <li>
                              <i class='icon-align-justify'></i>
                              icon-align-justify
                            </li>
                            <li>
                              <i class='icon-align-left'></i>
                              icon-align-left
                            </li>
                            <li>
                              <i class='icon-align-right'></i>
                              icon-align-right
                            </li>
                            <li>
                              <i class='icon-bold'></i>
                              icon-bold
                            </li>
                            <li>
                              <i class='icon-columns'></i>
                              icon-columns
                            </li>
                            <li>
                              <i class='icon-copy'></i>
                              icon-copy
                            </li>
                            <li>
                              <i class='icon-cut'></i>
                              icon-cut
                            </li>
                            <li>
                              <i class='icon-eraser'></i>
                              icon-eraser
                            </li>
                            <li>
                              <i class='icon-file'></i>
                              icon-file
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-file-alt'></i>
                              icon-file-alt
                            </li>
                            <li>
                              <i class='icon-file-text'></i>
                              icon-file-text
                            </li>
                            <li>
                              <i class='icon-file-text-alt'></i>
                              icon-file-text-alt
                            </li>
                            <li>
                              <i class='icon-font'></i>
                              icon-font
                            </li>
                            <li>
                              <i class='icon-indent-left'></i>
                              icon-indent-left
                            </li>
                            <li>
                              <i class='icon-indent-right'></i>
                              icon-indent-right
                            </li>
                            <li>
                              <i class='icon-italic'></i>
                              icon-italic
                            </li>
                            <li>
                              <i class='icon-link'></i>
                              icon-link
                            </li>
                            <li>
                              <i class='icon-list'></i>
                              icon-list
                            </li>
                            <li>
                              <i class='icon-list-alt'></i>
                              icon-list-alt
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-list-ol'></i>
                              icon-list-ol
                            </li>
                            <li>
                              <i class='icon-list-ul'></i>
                              icon-list-ul
                            </li>
                            <li>
                              <i class='icon-paper-clip'></i>
                              icon-paper-clip
                            </li>
                            <li>
                              <i class='icon-paperclip'></i>
                              icon-paperclip (alias)
                            </li>
                            <li>
                              <i class='icon-paste'></i>
                              icon-paste
                            </li>
                            <li>
                              <i class='icon-repeat'></i>
                              icon-repeat
                            </li>
                            <li>
                              <i class='icon-rotate-left'></i>
                              icon-rotate-left (alias)
                            </li>
                            <li>
                              <i class='icon-rotate-right'></i>
                              icon-rotate-right (alias)
                            </li>
                            <li>
                              <i class='icon-save'></i>
                              icon-save
                            </li>
                            <li>
                              <i class='icon-strikethrough'></i>
                              icon-strikethrough
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-table'></i>
                              icon-table
                            </li>
                            <li>
                              <i class='icon-text-height'></i>
                              icon-text-height
                            </li>
                            <li>
                              <i class='icon-text-width'></i>
                              icon-text-width
                            </li>
                            <li>
                              <i class='icon-th'></i>
                              icon-th
                            </li>
                            <li>
                              <i class='icon-th-large'></i>
                              icon-th-large
                            </li>
                            <li>
                              <i class='icon-th-list'></i>
                              icon-th-list
                            </li>
                            <li>
                              <i class='icon-underline'></i>
                              icon-underline
                            </li>
                            <li>
                              <i class='icon-undo'></i>
                              icon-undo
                            </li>
                            <li>
                              <i class='icon-unlink'></i>
                              icon-unlink
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-arrow-left'></i>
                        Directional icons
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content box-padding'>
                      <div class='row'>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-angle-down'></i>
                              icon-angle-down
                            </li>
                            <li>
                              <i class='icon-angle-left'></i>
                              icon-angle-left
                            </li>
                            <li>
                              <i class='icon-angle-right'></i>
                              icon-angle-right
                            </li>
                            <li>
                              <i class='icon-angle-up'></i>
                              icon-angle-up
                            </li>
                            <li>
                              <i class='icon-arrow-down'></i>
                              icon-arrow-down
                            </li>
                            <li>
                              <i class='icon-arrow-left'></i>
                              icon-arrow-left
                            </li>
                            <li>
                              <i class='icon-arrow-right'></i>
                              icon-arrow-right
                            </li>
                            <li>
                              <i class='icon-arrow-up'></i>
                              icon-arrow-up
                            </li>
                            <li>
                              <i class='icon-caret-down'></i>
                              icon-caret-down
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-caret-left'></i>
                              icon-caret-left
                            </li>
                            <li>
                              <i class='icon-caret-right'></i>
                              icon-caret-right
                            </li>
                            <li>
                              <i class='icon-caret-up'></i>
                              icon-caret-up
                            </li>
                            <li>
                              <i class='icon-chevron-down'></i>
                              icon-chevron-down
                            </li>
                            <li>
                              <i class='icon-chevron-left'></i>
                              icon-chevron-left
                            </li>
                            <li>
                              <i class='icon-chevron-right'></i>
                              icon-chevron-right
                            </li>
                            <li>
                              <i class='icon-chevron-sign-down'></i>
                              icon-chevron-sign-down
                            </li>
                            <li>
                              <i class='icon-chevron-sign-left'></i>
                              icon-chevron-sign-left
                            </li>
                            <li>
                              <i class='icon-chevron-sign-right'></i>
                              icon-chevron-sign-right
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-chevron-sign-up'></i>
                              icon-chevron-sign-up
                            </li>
                            <li>
                              <i class='icon-chevron-up'></i>
                              icon-chevron-up
                            </li>
                            <li>
                              <i class='icon-circle-arrow-down'></i>
                              icon-circle-arrow-down
                            </li>
                            <li>
                              <i class='icon-circle-arrow-left'></i>
                              icon-circle-arrow-left
                            </li>
                            <li>
                              <i class='icon-circle-arrow-right'></i>
                              icon-circle-arrow-right
                            </li>
                            <li>
                              <i class='icon-circle-arrow-up'></i>
                              icon-circle-arrow-up
                            </li>
                            <li>
                              <i class='icon-double-angle-down'></i>
                              icon-double-angle-down
                            </li>
                            <li>
                              <i class='icon-double-angle-left'></i>
                              icon-double-angle-left
                            </li>
                            <li>
                              <i class='icon-double-angle-right'></i>
                              icon-double-angle-right
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-double-angle-up'></i>
                              icon-double-angle-up
                            </li>
                            <li>
                              <i class='icon-hand-down'></i>
                              icon-hand-down
                            </li>
                            <li>
                              <i class='icon-hand-left'></i>
                              icon-hand-left
                            </li>
                            <li>
                              <i class='icon-hand-right'></i>
                              icon-hand-right
                            </li>
                            <li>
                              <i class='icon-hand-up'></i>
                              icon-hand-up
                            </li>
                            <li>
                              <i class='icon-long-arrow-down'></i>
                              icon-long-arrow-down
                            </li>
                            <li>
                              <i class='icon-long-arrow-left'></i>
                              icon-long-arrow-left
                            </li>
                            <li>
                              <i class='icon-long-arrow-right'></i>
                              icon-long-arrow-right
                            </li>
                            <li>
                              <i class='icon-long-arrow-up'></i>
                              icon-long-arrow-up
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-play-circle'></i>
                        Video player icons
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content box-padding'>
                      <div class='row'>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-backward'></i>
                              icon-backward
                            </li>
                            <li>
                              <i class='icon-eject'></i>
                              icon-eject
                            </li>
                            <li>
                              <i class='icon-fast-backward'></i>
                              icon-fast-backward
                            </li>
                            <li>
                              <i class='icon-fast-forward'></i>
                              icon-fast-forward
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-forward'></i>
                              icon-forward
                            </li>
                            <li>
                              <i class='icon-fullscreen'></i>
                              icon-fullscreen
                            </li>
                            <li>
                              <i class='icon-pause'></i>
                              icon-pause
                            </li>
                            <li>
                              <i class='icon-play'></i>
                              icon-play
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-play-circle'></i>
                              icon-play-circle
                            </li>
                            <li>
                              <i class='icon-play-sign'></i>
                              icon-play-sign
                            </li>
                            <li>
                              <i class='icon-resize-full'></i>
                              icon-resize-full
                            </li>
                            <li>
                              <i class='icon-resize-small'></i>
                              icon-resize-small
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-step-backward'></i>
                              icon-step-backward
                            </li>
                            <li>
                              <i class='icon-step-forward'></i>
                              icon-step-forward
                            </li>
                            <li>
                              <i class='icon-stop'></i>
                              icon-stop
                            </li>
                            <li>
                              <i class='icon-youtube-play'></i>
                              icon-youtube-play
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-html5'></i>
                        Brand icons
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content box-padding'>
                      <div class='row'>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-adn'></i>
                              icon-adn
                            </li>
                            <li>
                              <i class='icon-android'></i>
                              icon-android
                            </li>
                            <li>
                              <i class='icon-apple'></i>
                              icon-apple
                            </li>
                            <li>
                              <i class='icon-bitbucket'></i>
                              icon-bitbucket
                            </li>
                            <li>
                              <i class='icon-bitbucket-sign'></i>
                              icon-bitbucket-sign
                            </li>
                            <li>
                              <i class='icon-bitcoin'></i>
                              icon-bitcoin (alias)
                            </li>
                            <li>
                              <i class='icon-btc'></i>
                              icon-btc
                            </li>
                            <li>
                              <i class='icon-css3'></i>
                              icon-css3
                            </li>
                            <li>
                              <i class='icon-dribbble'></i>
                              icon-dribbble
                            </li>
                            <li>
                              <i class='icon-dropbox'></i>
                              icon-dropbox
                            </li>
                            <li>
                              <i class='icon-facebook'></i>
                              icon-facebook
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-facebook-sign'></i>
                              icon-facebook-sign
                            </li>
                            <li>
                              <i class='icon-flickr'></i>
                              icon-flickr
                            </li>
                            <li>
                              <i class='icon-foursquare'></i>
                              icon-foursquare
                            </li>
                            <li>
                              <i class='icon-github'></i>
                              icon-github
                            </li>
                            <li>
                              <i class='icon-github-alt'></i>
                              icon-github-alt
                            </li>
                            <li>
                              <i class='icon-github-sign'></i>
                              icon-github-sign
                            </li>
                            <li>
                              <i class='icon-gittip'></i>
                              icon-gittip
                            </li>
                            <li>
                              <i class='icon-google-plus'></i>
                              icon-google-plus
                            </li>
                            <li>
                              <i class='icon-google-plus-sign'></i>
                              icon-google-plus-sign
                            </li>
                            <li>
                              <i class='icon-html5'></i>
                              icon-html5
                            </li>
                            <li>
                              <i class='icon-instagram'></i>
                              icon-instagram
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-linkedin'></i>
                              icon-linkedin
                            </li>
                            <li>
                              <i class='icon-linkedin-sign'></i>
                              icon-linkedin-sign
                            </li>
                            <li>
                              <i class='icon-linux'></i>
                              icon-linux
                            </li>
                            <li>
                              <i class='icon-maxcdn'></i>
                              icon-maxcdn
                            </li>
                            <li>
                              <i class='icon-pinterest'></i>
                              icon-pinterest
                            </li>
                            <li>
                              <i class='icon-pinterest-sign'></i>
                              icon-pinterest-sign
                            </li>
                            <li>
                              <i class='icon-renren'></i>
                              icon-renren
                            </li>
                            <li>
                              <i class='icon-skype'></i>
                              icon-skype
                            </li>
                            <li>
                              <i class='icon-stackexchange'></i>
                              icon-stackexchange
                            </li>
                            <li>
                              <i class='icon-trello'></i>
                              icon-trello
                            </li>
                            <li>
                              <i class='icon-tumblr'></i>
                              icon-tumblr
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-tumblr-sign'></i>
                              icon-tumblr-sign
                            </li>
                            <li>
                              <i class='icon-twitter'></i>
                              icon-twitter
                            </li>
                            <li>
                              <i class='icon-twitter-sign'></i>
                              icon-twitter-sign
                            </li>
                            <li>
                              <i class='icon-vk'></i>
                              icon-vk
                            </li>
                            <li>
                              <i class='icon-weibo'></i>
                              icon-weibo
                            </li>
                            <li>
                              <i class='icon-windows'></i>
                              icon-windows
                            </li>
                            <li>
                              <i class='icon-xing'></i>
                              icon-xing
                            </li>
                            <li>
                              <i class='icon-xing-sign'></i>
                              icon-xing-sign
                            </li>
                            <li>
                              <i class='icon-youtube'></i>
                              icon-youtube
                            </li>
                            <li>
                              <i class='icon-youtube-play'></i>
                              icon-youtube-play
                            </li>
                            <li>
                              <i class='icon-youtube-sign'></i>
                              icon-youtube-sign
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box'>
                    <div class='box-header'>
                      <div class='title'>
                        <i class='icon-ambulance'></i>
                        Medical icons
                      </div>
                      <div class='actions'>
                        <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                        </a>
                        
                        <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                        </a>
                      </div>
                    </div>
                    <div class='box-content box-padding'>
                      <div class='row'>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-ambulance'></i>
                              icon-ambulance
                            </li>
                            <li>
                              <i class='icon-h-sign'></i>
                              icon-h-sign
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-hospital'></i>
                              icon-hospital
                            </li>
                            <li>
                              <i class='icon-medkit'></i>
                              icon-medkit
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-plus-sign-alt'></i>
                              icon-plus-sign-alt
                            </li>
                            <li>
                              <i class='icon-stethoscope'></i>
                              icon-stethoscope
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='icon-user-md'></i>
                              icon-user-md
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='group-header'>
                <div class='row'>
                  <div class='col-sm-6 col-sm-offset-3'>
                    <div class='text-center'>
                      <h2>Country flags</h2>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='box'>
                    <div class='box-content'>
                      <div class='row'>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='flag flag-ad'></i>
                              flag-ad
                            </li>
                            <li>
                              <i class='flag flag-ae'></i>
                              flag-ae
                            </li>
                            <li>
                              <i class='flag flag-af'></i>
                              flag-af
                            </li>
                            <li>
                              <i class='flag flag-ag'></i>
                              flag-ag
                            </li>
                            <li>
                              <i class='flag flag-ai'></i>
                              flag-ai
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='flag flag-al'></i>
                              flag-al
                            </li>
                            <li>
                              <i class='flag flag-am'></i>
                              flag-am
                            </li>
                            <li>
                              <i class='flag flag-an'></i>
                              flag-an
                            </li>
                            <li>
                              <i class='flag flag-ao'></i>
                              flag-ao
                            </li>
                            <li>
                              <i class='flag flag-ar'></i>
                              flag-ar
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='flag flag-as'></i>
                              flag-as
                            </li>
                            <li>
                              <i class='flag flag-at'></i>
                              flag-at
                            </li>
                            <li>
                              <i class='flag flag-au'></i>
                              flag-au
                            </li>
                            <li>
                              <i class='flag flag-aw'></i>
                              flag-aw
                            </li>
                            <li>
                              <i class='flag flag-az'></i>
                              flag-az
                            </li>
                          </ul>
                        </div>
                        <div class='col-sm-3'>
                          <ul class='list-unstyled' style='margin-bottom:0;'>
                            <li>
                              <i class='flag flag-ba'></i>
                              flag-ba
                            </li>
                            <li>
                              <i class='flag flag-bb'></i>
                              flag-bb
                            </li>
                            <li>
                              <i class='flag flag-bd'></i>
                              flag-bd
                            </li>
                            <li>
                              <i class='flag flag-be'></i>
                              flag-be
                            </li>
                            <li>
                              <i class='flag flag-bf'></i>
                              flag-bg
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class='row'>
                        <div class='col-sm-12' style='margin-top:20px'>
                          <div class='text-center'>
                            <strong>And many more...</strong>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <footer id='footer'>
            <div class='footer-wrapper'>
              <div class='row'>
                <div class='col-sm-6 text'>
                  Copyright © 2013 Your Project Name
                </div>
                <div class='col-sm-6 buttons'>
                  <a class="btn btn-link" href="http://www.bublinastudio.com/flatty">Preview</a>
                  <a class="btn btn-link" href="https://wrapbootstrap.com/theme/flatty-flat-administration-template-WB0P6NR1N">Purchase</a>
                </div>
              </div>
            </div>
          </footer>
        </div>
      </section>
    </div>
    <!-- / jquery [required] -->
    <script src="assets/javascripts/jquery/jquery.min.js" type="text/javascript"></script>
    <!-- / jquery mobile (for touch events) -->
    <script src="assets/javascripts/jquery/jquery.mobile.custom.min.js" type="text/javascript"></script>
    <!-- / jquery migrate (for compatibility with new jquery) [required] -->
    <script src="assets/javascripts/jquery/jquery-migrate.min.js" type="text/javascript"></script>
    <!-- / jquery ui -->
    <script src="assets/javascripts/jquery/jquery-ui.min.js" type="text/javascript"></script>
    <!-- / jQuery UI Touch Punch -->
    <script src="assets/javascripts/plugins/jquery_ui_touch_punch/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
    <!-- / bootstrap [required] -->
    <script src="assets/javascripts/bootstrap/bootstrap.js" type="text/javascript"></script>
    <!-- / modernizr -->
    <script src="assets/javascripts/plugins/modernizr/modernizr.min.js" type="text/javascript"></script>
    <!-- / retina -->
    <script src="assets/javascripts/plugins/retina/retina.js" type="text/javascript"></script>
    <!-- / theme file [required] -->
    <script src="assets/javascripts/theme.js" type="text/javascript"></script>
    <!-- / demo file [not required!] -->
    <script src="assets/javascripts/demo.js" type="text/javascript"></script>
    <!-- / START - page related files and scripts [optional] -->
    <script src="assets/javascripts/plugins/bootstrap_hover_dropdown/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
    <!-- / END - page related files and scripts [optional] -->
  </body>
</html>
